{include  file="common/doc" /}
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <table class="layui-table" id="table_list" lay-filter="table_list"></table>
        </div>
    </div>
</div>
<template id="table_toolbar">
    <div class="layui-btn-group">
        <?php echo $operation['toolbar']; ?>
    </div>
</template>
<!-- 表格操作列 -->
<script type="text/html" id="op_table">
    <?php echo $operation['tool']?>
</script>
<template id="form_template" style="display: none">
    <form class="layui-form" id='form' lay-filter="form">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">基本信息</li>
                <li>参数</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label">接口名称</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="api_name" placeholder="输入接口名称"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">签名</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="sign" placeholder="由系统自动生成不允许修改" disabled/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">价格</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="number" name="price" placeholder="单位流量币"/>
                        </div>
                    </div>
                    {foreach $level as $key=>$vo}
                    <div class="layui-form-item">
                        <label class="layui-form-label">{$vo.level_name}</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="number" name="level[{$key}][price]" placeholder="单位流量币"/>
                            <input class="layui-input" type="hidden" name="level[{$key}][level_id]" value="{$vo.level_id}" />
                            <input class="layui-input" type="hidden" name="level[{$key}][price_id]" value="" />
                        </div>
                    </div>
                    {/foreach}
                </div>
                <div class="layui-tab-item">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form-item">
                            <label class="layui-form-label">接口类型</label>
                            <div class="layui-input-inline">
                                <select name="api_type_id" lay-filter="api_type">
                                    <option value=""></option>
                                    {foreach $ApiType as $key=>$vo }
                                    <option value="{$vo.api_type_id}">{$vo.api_type_name}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="param">

                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">请求参数构建</label>
                            <div class="layui-input-block">
                                <textarea  name="query" cols="30" rows="10" class="layui-textarea" disabled></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="submit" lay-submit lay-filter="form_submit">提交</button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
            </div>
        </div>
    </form>
</template>
<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
    }).use(['index', 'util', 'table'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        table.render({
            elem: '#table_list'
            , url: 'read' //数据接口
            , height: 'full-20'
            , toolbar: '#table_toolbar'
            , page: true //开启分页
            , limit: 30
            , cols: [[ //表头
                {type: 'numbers'},
                {type: 'checkbox'},
                {field: 'api_name', title: '接口名称', align: "center"},
                {field: 'sign', title: '签名', align: "center"},
                {field: 'price', title: '价格', align: "center"},
                {align: 'center', toolbar: '#op_table', title: '操作', width: 300}
            ]]
        });
        table.on('tool(table_list)', function (obj) {
            let event = obj.event;
            if (event.includes('upd')) {
                //更新
            }
            if (event.includes('del')) {
                // 删除
            }
        });

        function attr(where) {
            $.ajax({
                url: 'get_param',
                data: where,
                async: false,
                success: function (res) {

                    let html = '';

                    if (res['data']){
                        let data = res['data'];
                        data.forEach(function (item, index) {
                            html += '<div class="layui-form-item">';
                            html += ' <label class="layui-form-label">';
                            html += item['field_alias'];
                            html +=`<input type='hidden' name='api_field[${index}][api_param_id]'  value='${item['api_param_id']}'>`;
                            html +=`<input type='hidden' name='api_field[${index}][api_field_id]'  value=''>`;
                            html += '</label>';
                            if (item['is_param']){
                                html += ' <div class="layui-input-inline" style="width: 100px">';
                                html += `<input type="text" name="api_field[${index}][name]" class="layui-input"  value="" placeholder="字段名">`;
                                html += '</div>';
                                html += ' <div class="layui-input-inline" style="width: 100px">';
                                html += `<input type="checkbox"  data-default="${item.value}" data-field="api_field[${index}]" data-input-type="${item.input_type}" name="api_field[${index}][is_require]" value="1" lay-filter="is_require" value="1" lay-skin="switch" lay-text="必填|可选">`;
                                html += '</div>';
                            }
                            html +='<div class="attach_field">';
                            if (item.input_type == 2){
                                html += ' <div class="layui-input-inline" >';
                                html +=`<select name="api_field[${index}][default]">`;
                                let option = item.value.split('\n');
                                html +='<option value="">默认值</option>';
                                option.forEach(function(item){
                                    let item_val = item.split('=');
                                    html +=`<option value="${item_val[0]}">${item_val[1]}</option>`;
                                });
                                html += '</select>';
                                html += '</div>';

                            }else{
                                html += ' <div class="layui-input-inline" style="width:100px">';
                                html += `<input type="text" name="api_field[${index}][default]" class="layui-input" placeholder="默认值">`;
                                html += '</div>';
                            }
                            html +='</div>';
                            html += '</div>';
                        });
                    }
                    $('.param').html(html);
                    form.on('switch(is_require)', function(data){
                        let form_item =  $(data.elem).parents('.layui-form-item');

                        if (data.elem.checked){
                            form_item.find('.attach_field').html('');
                        }else{
                            let html  ='';
                            let default_val = $(this).attr('data-default');
                            let input_type = $(this).attr('data-input-type');
                            let data_field= $(this).attr('data-field');
                          if (input_type == 2){
                              html += ' <div class="layui-input-inline" style="width: 100px">';
                              html +=`<select name="${data_field}[default]">`;
                              let option = default_val.split('\n');
                              html +='<option value="">默认值</option>';
                              option.forEach(function(item){
                                  let item_val = item.split('=');
                                  html +=`<option value="${item_val[0]}">${item_val[1]}</option>`;
                              });
                              html += '</select>';
                              html += '</div>';

                          }else{
                              html += ' <div class="layui-input-inline" style="width:100px">';
                              html += `<input type="text" name="${data_field}[default]" class="layui-input" placeholder="默认值">`;
                              html += '</div>';
                          }
                            form_item.find('.attach_field').html(html);
                            form.render();

                        }
                    });


                    form.render();


                }
            })
        }

        table.on('toolbar(table_list)', function (obj) {
            let event = obj.event;
            if (event.includes('add')) {
                // 添加
                layer.open({
                    type: 1,
                    area: ['800px', '500px'],
                    content: $('#form_template').html(),
                    success: function (lay, index) {
                        form.render();
                        form.on('select(api_type)', function (obj) {
                            attr({'api_type_id':obj.value});
                        });
                        form.on('submit(form_submit)', function (obj) {
                            let status = request({'url': 'add', 'data': obj.field});
                            if (status) {
                                table.reload('table_list');
                                layer.close(index);
                            }
                            return false;
                        })
                    }
                })
            }

        });
        table.on('tool(table_list)', function (obj) {
            let event = obj.event;

            if (event.includes('upd')) {
                layer.open({
                    type: 1,
                    area: ['800px', '500px'],
                    content: $('#form_template').html(),
                    success: function (lay, index) {
                        form.render();
                        function makeQuery(queryObject) {
                            const query = Object.entries(queryObject)
                                .reduce((result, entry) => {
                                    result.push(entry.join('='))
                                    return result
                                }, []).join('&')
                            return `?${query}`
                        }
                        attr({'api_type_id':obj.data['api_type_id']});
                            form.on('select(api_type)', function (obj) {
                                attr({'api_type_id':obj.value});
                            });
                        let query = {};
                        obj.data.api_field.forEach(function(item,index){
                            if (item['name']){
                                query[item['name']] =item['default'];
                            }
                            let require = $(`input[name='api_field[${index}][is_require]']`);
                            require.click();
                            Object.keys(item).forEach(function(ite){
                                obj.data[`api_field[${index}][${ite}]`] = item[ite];
                                if (ite.includes('is_require') && item[ite]){
                                    let require = $(`input[name='api_field[${index}][is_require]']`);
                                    require.parents('.layui-form-item').find('.attach_field').html('');
                                }
                            });
                        });
                        obj.data['query']=makeQuery(query);
                        obj.data.api_price.forEach(function(item,index){
                            Object.keys(item).forEach(function(ite){
                                obj.data[`level[${index}][${ite}]`] = item[ite];
                            })
                        });

                        form.val('form', obj.data);
                        form.on('submit(form_submit)', function (form_data) {
                            form_data.field['api_id']  =  obj.data['api_id'];
                            let status = request({'url': 'upd', 'data': form_data.field});
                            if (status) {
                                table.reload('table_list');
                                layer.close(index);
                            }
                            return false;
                        })
                    }
                })
            }
            if (event.includes('del')) {
                // 删除
                let status = request({'url': 'del', 'data': {'api_id': obj.data['api_id']}});
                if (status) {
                    obj.del();
                }
            }
        })
    });
</script>
</body>
</html>

